<template>
	<view class="sleep-day">
			<view class="assasstion">
				<text>睡眠质量评价</text>
				<text>{{data.leve}}</text>
			</view>
			<scroll-view class="sleep-day-content">
				<view class="sleep-echart">
					<view>
						<image src="/static/index/sleep-icon.png"></image>
						<text class="title">长睡眠</text>
					</view>
					<view class="sleep-time">
						<text>{{data.sleepTime}}</text>
					</view>
					<view class="echart">
						<sleepLineVue></sleepLineVue>
					</view>
				</view>
				<view class="sleep-structure">
					<text class="title">睡眠结构</text>
					<text>{{data.deepSleep}}</text>
					<view class="deep-sleep">
						<sleepColumnVue></sleepColumnVue>
					</view>
					<text>{{data.lightSleep}}</text>
					<view class="light-sleep">
						<sleepLightColumnVue></sleepLightColumnVue>
					</view>
				</view>
				<view class="sleep-heart-rate">
					<text class="title">睡眠平均心率</text>
					<view>
						<text>{{data.averageHeartRate}}</text>
					</view>
				</view>
				<view class="sleep-read">
					<view>
						<image src="/static/index/professional.png"></image>
						<text class="title">专家睡眠解读与建议</text>
					</view>
					<text>{{data.suggest}}</text>
					<view class="sleep-infomation">
						<text>解读与意见</text>
						<textarea>
							{{data.suggestDetail}}
						</textarea>
					</view>
				</view>
			</scroll-view>
		</view>
</template>

<script setup>
	import sleepLineVue from '../../../ucharts/sleep/sleepLine.vue';
	import sleepColumnVue from '../../../ucharts/sleep/sleepColumn.vue';
	import sleepLightColumnVue from '../../../ucharts/sleep/sleepLightColumn.vue';
	// import { getSleepDayInfo } from '../../../../utils/api/index/sleep/sleepDay';
import { ref } from 'vue';
	//接收后端数据
	const data=ref({
		suggestDetail:"睡前进行一些放松活动，如阅读纸质书籍（避免使用电子设备）、听轻柔的音乐、泡热水澡或进行深呼吸练习。这些活动可以帮助你缓解一天的压力，让身体逐渐进入放松状态。\n晚餐尽量避免食用过于油腻、辛辣或难以消化的食物。同时，避免在睡前2 - 3小时内进食大量食物，以免影响睡眠质量。",
		leve:"一般",
		sleepTime:8,
		deepSleep:2,
		lightSleep:6,
		averageHeartRate:60,
		suggest:"今晚入睡时间较晚。"
	})
	//图表数据
	// const list=ref([])
	// getSleepDayInfo().then(res=>{
	// 	data.value=res.data;
	// 	list.value=res.data.list
	// }).catch(error=>{
	// 	console.log("请求后端数据失败",error)
	// })
</script>

<style scoped>
	.sleep-day{
		paddingr:0rpx 10rpx 0rpx 10rpx;
		margin-top:220rpx;
		height:100vh;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
	
	}
	.sleep-day>view{
		width: 95%;
		margin: 10rpx auto;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		border-radius: 25rpx;
	}
	.sleep-day-content{
		flex: 1;
		/* height:90%; */
		min-height:1800rpx;
	}
	/* 睡眠评价部分 */
	.assasstion{
		height:10%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	.assasstion text:nth-child(1),
	.sleep-time text:nth-child(2),
	.sleep-infomation textarea,
	.sleep-read>text{
		font-size:24rpx;
	}
	.assasstion text:nth-child(2),
	.sleep-time text:nth-child(1){
		font-size:44rpx;
	}
	text{
		margin:8rpx 0rpx 0rpx 20rpx;
	}
	/* 睡眠echart图板块 */
	.sleep-echart{
		height:30%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		border-bottom: 5rpx dotted #bababa;
		margin-bottom: 30rpx;
		padding-top: 20rpx;
	}
	.sleep-echart view:nth-child(1){
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.sleep-echart view:nth-child(2){
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-top:20rpx;
	}
	image{
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}
	.echart image{
		width:80%;
		height:300rpx;
	}
	/* 睡眠结构 */
	.sleep-structure{
		height:30%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		border-bottom: 5rpx dotted  #bababa;
		padding-bottom:50rpx;
	}
	.light-sleep,.deep-sleep{
		margin: 10rpx;
	}
	
	/* 监测睡眠心率 */
	.sleep-heart-rate{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top:20rpx;
		border-bottom: 5rpx dotted  #bababa;
		padding-bottom:40rpx;
	}
	.sleep-heart-rate>view{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	/* 睡眠解读 */
	.sleep-read{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	.sleep-infomation{
		background-color:rgba(105, 156, 254, 0.20);
		border-radius: 25rpx;
		width: 80%;
		margin: 0rpx auto;
		padding: 10rpx 15rpx 10rpx 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		word-wrap: break-word;
	}
	 .sleep-read>text{
		 margin:5rpx auto;
	 }
	textarea{
		width:95%;
		margin:15rpx auto;
	}
	.sleep-read view:nth-child(1){
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin: 10rpx 0rpx 10rpx 0rpx ;
	}
	/* 标题文字格式 */
	.title{
		font-weight: bold;
	}
</style>